<script setup lang="ts">
const props = defineProps(["pageNum", "pageSize"]);
const $emit = defineEmits(["update:pageNum", "update:pageSize"]);

const handler1 = () => {
  $emit("update:pageNum", props.pageNum + 1);
};
const handler2 = () => {
  $emit("update:pageSize", props.pageSize + 1);
};
</script>

<template>
  <div class="child1">
    <h1>子组件曺冲</h1>
    <p>页码：{{ pageNum }}，每页条数：{{ pageSize }}</p>
    <div>
      <button @click="handler1">更新页码</button>
      <button @click="handler2">更新每页条数</button>
    </div>
  </div>
</template>

<style scoped>
.child1 {
  width: 400px;
  height: 290px;
  background: chocolate;
  padding: 0.5rem;
}
</style>
